Web Applications Videos
The videos below were published as part of the Alpha Five Version 10 release. Some of these videos may not apply to Alpha Anywhere.
| Number | Category | Description |
| 1 | General | This video shows a basic Ajax component. It shows how easy it is to create an Ajax Grid using the Grid builder.
The video demonstrates basic interaction with the Grid such as sorting, page navigation and changing the
number of record per page.
|
| 2 | Searching | In these videos we will show the various types of search features you can add to the Grid:
- Search Part
The videos starts with the Customer grid created in example 1.
|
| 3 | Editing | In this video we show an editable grid. There are many different ways an editable grid can be configured We show:
- Submitting all rows at once - Saving individual rows - Edit on demand - Turning off option to save individual rows - Moving the new record rows to the top of the grid - Keyboard support (F9 to save data, Up and Down to change row with focus, etc.) - Trapping actions that would loose uncommitted data.
|
| 4 | Rich Text | The grid contains a built-in HTML editor for editing rich Memo fields. This video demonstrates how rich Memos
can be edited in the Grid part and the Detail View part.
- In the Grid part, the HTML editor is configured as a popup editor - it is opened when you click on the field - In the Detail View, the HTML editor can be configured to edit 'in-place'.
|
| 5 | Multi-user editing | The grid uses 'optimistic record locking' to trap multi-user edit conflicts. This video demonstrates:
- Automatic refresh of data as soon as the user starts to edit (which minimizes chances of a write conflict) - Trapping write conflicts.
|
| 6 | Data Validation | The grid has exceptionally strong data validation features. This video demonstrates:
- Data validation rules - Data validation custom Xbasic at the field level - Data validation events - For DBF tables, automatic honoring of Field Rules
|
| 7 | Error Reporting Styles | The grid offers several styles for reporting errors. This video demonstrates the various error reporting styles.
|
| 8 | Lookups | The lookup feature in the Grid is exceptional. This feature demonstrates:
- Opening the lookup in a window on the page - Dynamic lookup filtering
|
| 9 | Detail View | This video shows the various options for the grid 'Detail View'. This video demonstrates:
- Various options for where the Detail View is opened: - on the page underneath the Grid part - in a modal, popup window - in a modeless, popup window - in the Grid part, directly under the row. - Using the 'pre-fetch' option for greater responsiveness
|
| 10 | Row Expander | The 'row expander' turns on a small icon next to each row in the Grid. When you click this icon, the row expands
to show additional information related to the current row. This video demonstrates:
- Row expander showing a single grid - Row expander showing multiple grids in a Tab control - Row expander showing multiple grids in an Accordion control - Setting the row expander to only allow one row to be expanded at a time - Defining a custom row expander event to show any arbitrary content generated by the server
|
| 11 | Conditional Formatting | The conditional formatting option allows you to format data conditionally, depending on its value. For example,
you might set the color of the quantity field to be red if it is above average. This video demonstrates:
- conditional formatting at the cell and control level - conditional formatting at the row level.
|
| 12 | Conditional Images | The conditional image feature allows you to display different icons in the grid depending on the data in each
row. This video demonstrates how above average quantities have a green icon and below average have a red
icon. There is no limit to the number of conditions you can test for.
|
| 13 | Master Templates | The Grid component comprises three sub-parts - Search Part, Grid Part and Detail View Part. In previous versions
of Alpha Five you laid out these three parts on the .a5w page that contained the Grid component. With Master
Templates, you can lay out these parts in the Grid definition itself. You can also enclose the parts in a
Tab or Accordion object.
|
| 14 | Collapse Bar | The collapse bar allows you to wrap the entire Grid component in a frame. When you collapse the frame (by clicking
on the frame title bar), the Grid is hidden. This is useful if you have a page with multiple Grid components
on it.
|
| 15 | Form Layout | The records in a Grid component can be displayed in either a tabular view or a form view. When you use the form
view, the Grid offers many different layout options that allow you to create highly customized form layouts.
This vide demonstrates:
- Tab controls - Accordion controls - Container controls - Frame controls
Watch Video (Container and Frames)
|
| 16 | "Liquid" Forms | Smart phones are an increasingly popular platform for running web applications. On a smart phone, the screen
real estate is severely limited. This video shows how the Grid makes it easy to design 'liquid' forms - forms
that automatically reconfigure themselves based on the screen size.
|
| 17 | Ajax Windows | When you click on a hyperlink in a Grid you can display related information. This video shows how this related
information can be shown in Windows on the current page. There are several different types of window styles:
- Modal popup window - Modeless popup window - Dropdown windows In addition, you can also display the related information in any user defined DIV on the page. Watch View (Popup Windows) Watch Video (DIV) |
| 18 | Cascading Dropdown Boxes in Search Part | The Search Part of the Grid can display dropdown boxes for search fields. Say you have a dropdown box for the
Country, City and Company fields. You can configure dropdown boxes so that until the user has made a selection
from the Country field, the City and Company dropdown boxes are disabled. When the user selects a Country,
the City dropdown box is populated with cities in the selected country, and so on.
This video shows how to define cascading dropdown boxes: Watch Vide (Specifying Cascading Dropdown Boxes)
|
| 19 | Action Javascript - Print Report as PDF | This video shows how you can print PDF reports and display them in popup windows (modal, modeless or dropdown),
or in an arbitrary DIV on the page.
|
| 20 | Watermark Fields | Watermark fields allow you to put the field label inside the field itself. If you are designing forms where screen
real-estate is limited, watermark fields are a great way to save space.
|
| 21 | Auto-suggest Fields | Auto-suggest fields work similarly to the now familiar Google Search Toolbar. As you start typing into a textbox,
a list of suggestions is supplied. In the case of the Grid component, the suggestions can come from a static
list of values, or more commonly, from a table. The list of choices can be filtered based on other fields
previously filled in. For example, say that you have defined the 'City' field to be an auto-suggest field.
If you previously entered 'CA' into the 'State' field, then when you start typing into the 'City' fields,
the list of suggestions will only show cities in California.
|
| 22 | Edit-combo box fields. | Standard HTML does not support an edit-combo box control. This video shows how you can include edit-combo boxes
in your Grid components. You can use edit-combo boxes in the Search, Grid and Detail View parts.
|
| 23 | Supercontrols | This video shows how you can define a window to show Google Maps for the address in the current record.
|
| 24 | Action Javascript - Open a Grid | This video shows how you can open a Grid in a popup window (modal, modeless or dropdown), or in an arbitrary
DIV on the page. The Action Javascript genie writes all of the Javascript code.
|
| 25 | Tabbed UI Builder | The Tabbed UI builder allows you to take all of the pieces of your applications (Grids, Reports, A5W pages, etc.)
and build a tabbed user interface, much like a modern desktop application would employ.
|
| 26 | Page Layout Builder | The Page Layout builder allows you to create a complex page layout that contains multiple components. Components
can be laid out in tabs, and accordions and can be displayed in on-page windows, or in pop-up windows (either
modal, or modeless).
|
| 27 | Window Options | The Action Javascript builders make it very easy to create buttons that open other Grids, Reports, Pages, etc.
in pop-up windows. You can also open up the target Grids, Reports, etc. in new 'Panes' in the Tabbed UI builder.
These videos show some of the Window options such as:
Multiple modeless window Re-using the same modeless window Setting the window title Opening a new pane in the Tabbed UI Object.
|
| 28 | Constrained Keyword Search | The Grid component has always allowed you to create Keyword searches - a search that searches in multiple fields.
But now, you can create 'constrained' keyword searches. This allows you to perform a keyword search subject
to some other constraint e.g. (Department = "Books").
|
| 29 | Tabbed Linked Grids | You can create very powerful 'master-detail' Grids by placing 'Linked Content Sections' on the Grid. If a 'Linked
Content Section' contains more than one Grid, the content is displayed in a Tab or Accordion object. For
example, you might have a Customer Grid that display the Orders for the customer record that has focus. The
Orders grid, in turn, might display the Order Details for the order that has focus. There is no limit to
the level of nesting of linked content.
This show how easy it is to create a Linked Content Section. |
| 30 | Client-side Formatting, Calculated Fields and Show/Hide Fields | The Grid component supports several powerful 'client-side' features such as calculated fields, dynamic formatting,
dynamic show/hide of Grid elements and dynamic enable/disable of Grid elements.
The first video shows how you can define a calculated field. The calculation is performed using Javascript as soon as the value in one of the input fields changes.
The second video shows how you can dynamically style controls in the Grid. It shows how the Quantity field can be displayed in a different font and background color depending on what range of values it is in.
The third video shows how parts of a Grid form can be hidden under certain conditions. The Grid shown has a section for the billing address and shipping address. If the 'Shipping address is same as billing address' field is checked, the entire 'Shipping Address' part of the Grid form is hidden. |
| 31 | Client-side Show/Hide and Enable/Disable of Tab and Accordion Panes | The panes in a Tab and Accordion control can be dynamically hidden/shown, or enabled/disabled based on an expression
that is evaluated in the Browser.
This video shows a Grid with a Tab object with two panes (Billing Address and Shipping Address). If the 'Shipping address is same as billing address' checkbox is checked, the 'Shipping Address' pane is hidden and then disabled.
|
| 32 | Multiple Language Support | If you are developing applications for multiple languages, you might want to change labels and prompts based
on the current language. You can tag any text in the Grid definition as 'replaceable' and then you can define
multiple language definitions in which you define the value for all of the tagged strings in your definition.
This feature is extremely powerful because the replacement strings that you define in your language definitions can be expressions or static text. This video shows how you can use this feature. |
| 33 | Grid Templates | Whenever you create a new Grid Component, the Grid Templates Genie pops up, allowing you to select one of several
pre-defined templates, or a template from your own library of templates. Templates can be a great time saver
because they can pre-set a multitude of properties when you create a new component.
This video shows how you can use Templates, and how you can define your own templates.
|
| 34 | Edit-Combo Boxes - Dynamic Filtering | An earlier video (number 22) showed how you can create edit-combo box controls in your Grid component. In this
video we show how you add dynamic filtering to your edit-combo boxes. With dynamic filtering, the list of
choices that are shown in the edit-combo box is filtered on the value in some other control that you have
filled in. For example, you might have filled in MA into the State field. When you open the Edit-combo, only
cities in MA will be shown.
The dynamic filtering can be client-side, or server-side. If you choose the client-side option, then the edit-combo box is populated at render time with a complete set of data and then when you open the edit combo, Javascript is used to filter the data that is already in memory.
If you choose the server-side option, then when you open the edit-combo, an Ajax callback is made to populate the edit-combo box.
The edit-combo can be used in all parts of the Grid - i.e. Search, Grid and DetailView.
|
| 35 | Grid with an Embedded Grid in a Cell | Grids are completely recursive. That means that Grids can be placed inside other Grids, up to any depth that
you want. In this example, we have a simple Grid showing customers. One of the columns in the Grid contains
an embedded Grid showing the Invoices for that customer. This embedded Grid, in turn, has a row expander.
When you open the row expander, it shows all of the invoice items for the selected invoice.
Normally, each cell in a tabular grid contains a single field. But in this example, instead of placing a single field in a column cell, we have placed an entire Grid.
|
| 36 | Action Javascript - Lookup and Fill-in Action | The 'Lookup and Fill-in' action allows you to define a Javascript event that will automatically lookup data in
a lookup table and then fill-in certain fields in the record you are editing.
This video shows how you can define a 'Lookup and Fill-in' action using Action Javascript. |
| 37 | Client-side System Events | The Grid Component has a rich client-side event model. This video shows how you can use client-side events to
put up a simple 'Sorting....' message while the Ajax callback is taking place after the user has clicked
on a column heading to sort the Grid.
|
| 38 | Using Arguments in the PageLayout and TabbedUI Components to Filter Records | You can define arguments in the PageLayout and TabbedUI builder. Arguments allow you to filter the Grid and Reports
shown in the PageLayout or TabbedUI based on some external data (such as a session variable, or page variable).
This video shows how you can put a button in a Grid to open a pop-up window. The pop-up window shows a PageLayout component that is filtered based on data in the current Grid row. A second button opens a pop-up window showing a TabbedUI component that is also filtered based on data in the current Grid row.
|
| 39 | Using a Grid Component instead of a Dialog Component | If you have used the Dialog component in your V9 web application, you might want to consider using the Grid component
as a replacement for the Dialog. The reason is that the Grid component in V10 has many more features than
the Dialog component (which has not been updated for V10) and can be configured to behave in a manner that
is very similar to the way in which a Dialog behaves.
The key to making a Grid behave like a Dialog is to create a dummy table on which the Grid will be based, and then to configure the Grid to use a 'Form' layout. The video shows how to create a simple dialog to collect name and address information. |
| 40 | Using AEX Files To Reference Global Functions | When you define server-side event handlers in a Grid you can reference functions that you define in the Grid
itself, or Global Functions that you define in the Code tab of the Control Panel. If you reference a Global
Function, you have to compile the Global Functions into an .AEX file, insert a reference to the .aex file
in your Grid Component, and then publish this .AEX file along with the other files in your project.
This video shows how you can use .AEX files in a Grid Component, and it shows how the Publishing process can automatically compile the .AEX file and publish it.
|
| 41 | Using 3rd Party Editors (such as Dreamweaver) with Alpha Five | Many designers are very familiar with a particular HTML editor (such as Dreamweaver, or Fontpage) and would prefer
to user their favorite editor while editing .a5w pages in an Alpha Five web project. Version 10 makes it
easy to use 3rd party HTML editors.
|
| 42 | Custom Search Bar Buttons | By default, when you create an 'Alphabet Button' search bar, Alpha Five creates buttons for each letter of the
alphabet. However, you can also create custom search bars in which you specify what the button labels are,
and what the corresponding search expression is for each button. This feature has many uses. For example,
a list of houses for sale could have buttons for several different pre-defined searches: 'Less than $500K',
'Between $500K and $750K', '$750K to $1M' and 'Above $1M'.
|
| 43 | HTML Form Import Genie | In some cases a developer using Alpha Five will already have a form that was designed in some external HTML editor,
such as Dreamweaver or Frontpage. They would like to 'import' that form into an Alpha Five web project and
'connect' the form to a database.
This video shows how the Form Import Genie can be used to connect a form in an HTML page to a database.
|
| 44 | Tree Control Genie | For users who are hand-coding .a5w pages, the Tree Control Genie shows you how to create the Javascript and Xbasic
to display an Ajax enabled tree control.
|
| 45 | Advanced use of Custom Controls in a Grid |
One of the control types available in the Grid is the Custom Control. This allows you to define an arbitrary Xbasic function to compute the HTML and Javascript for the control. This example shows a Grid showing Invoices. One of the cells in the Grid shows the line items for the Invoice. This could have been done using an Embedded Grid Component, but the Custom Control solution is a lighter weight, and faster solution.
|
| 46 | Advanced use of ShowRowExpanderIcon event | When you use the Row Expander feature in a Grid, by default, the expand icon is shown next to each row in the
Grid, regardless of whether that row actually has any child records or not. In some cases, you might want
to suppress the row expander icon from showing if there if there are no child records. You can do this using
the ShowRowExpanderIcon event.
|
| 47 | Displaying Chinese Data | Improved support for UTF-8 data makes it possible to display Chinese data in a Grid.
|
| 48 | User Defined Watch Events | A user defined watch event allows you to define Javascript code that will get executed whenever the value in
a 'watched' field in your Grid changes. In this video, we show how the label on the 'state' field can be
changed to 'State' if the country is 'USA' and to 'Province' for all other countries.
|
| 49 | Printing the Currently Selected Records, or Opening a Grid showing Currently Selected Records. | Putting a button on a Grid to open another Grid or a Report is easily accomplished using Action Javascript. This
video shows how you can use the special Alpha Five functions, CurrentGridFilter() and CurrentGridOrder()
to print the records that are currently selected in the Grid. You can also use these functions to open another
Grid showing the same selection of records in the current Grid.
|
| 50 | The 'Working Preview' pane in the Grid Builder | The 'Working Preview' pane in the Grid Builder allows you to run the Grid (just as the Live Preview pane does).
But 'Working Preview' does not use the Application Server - instead, it uses a special protocol (not 'http')
to talk to Alpha Five directly. Debugging your Xbasic event handlers is very easy when you use Working Preview.
|
| 51 | Show/hide expressions in the Page Layout and TabbedUI component | You can use show/hide expression in the Page Layout component to show or hide the objects that you place in the
component. The expressions can refer to session variables and arguments defined in the component. Using show
hide expressions, it is easy to show one user a page with one particular set of components, and another user
a completely different set of components. In the case of the Tabbed UI component, the show/hide expressions
can control which buttons are visible in the button pane.
|
| 52 | Using Server Side Javascript Grid Events to show a button in only the first row of a Grid | Sometimes you might want to show a control, such as a Button or Hyperlink, in only the first row of a Grid. This
video shows how this is easily done using the System Javascript Events in the grid.
|
| 53 | Dynamic DetailView window title | The DetailView can be shown in a popup Ajax window. You might want the window title to be dynamically constructed
using data from the current Grid row. This video shows how you can do this using system Javascript events.
|
| 54 | Automatically Close Modal Pop-up Ajax Window when Grid Data are Saved | It is easy, using Action Javascript, to open a Grid in a pop-up modal Ajax window. This video shows how you can
cause the modal pop-up window to automatically close when the data in the Grid shown in the pop-up window
are saved.
|
| 55 | TabbedUI Component with buttons on Home Page (instead of on button bar on left) | The Tabbed UI component is an easy way to create a 'launch pad' for all of the pages, Grids and Reports
in your application. The standard Tabbed UI component has a series of buttons in a 'button pane' on the left
or right hand side. Each of the buttons opens a new pane in the Tabbed UI.
Instead of putting the buttons that open new Tabbed UI panes in the 'button pane', you might want to put the buttons directly on the Home Page that is displayed when the Tabbed UI component is first opened.
This video shows how this is easily accomplished by using a Page Layout component for the Home Page of the Tabbed UI component. (Requires System Addins build 3516 or greater).
|
| 56 | Action Javascript - User Defined Ajax Callback - Setting Grid Properties on a Callback | Whenever you perform an operation (e.g. Sorting, Page Navigation, Saving data, etc.) Ajax callbacks are made
to the server. These callbacks are system callbacks (i.e. the user does not have to do any programming- Alpha
Five generates the callbacks automatically).
There may be situations in which you want to program your own user-defined Ajax callback (for example, to compute shipping charges and taxes on an order). Defining a user-defined Ajax callback can be done easily using Action Javascript. When the callback is made, a user specified Xbasic function is called to handle the callback. This function will typically compute some Javascript commands to send back to the Browser.
This series of videos show how you can use the special e._set object in your callback event handler to set properties in the Grid. In your callback handling event, instead of writing Javascript to send back to the client, you simply set properties of the e._set object and Alpha Five automatically generates the appropriate Javascript response.
Requires build 3517 or above.
|
| 57 | Tabbed UI - Reports - Prompting for Arguments at Runtime | This video shows enhancements that have been made to the Tabbed UI Component. When you print a report in the
Tabbed UI, you can specify that certain parameter values should be prompted for at run-time.
Previously, the dialog that prompted for these values could only display simple input control. Now, you can specify a calendar control for Date and Date/Time fields, a Listbox or Combo box (which dynamically populated choices), a Checkbox for logical values, or a Radio Button control.
Required build 3517 or above. |
| 58 | Grid, TabbedUI and PageLayout Builder | Using these builders is now easier because you can quickly search for a property in the property grid when you
want to edit a property value.
|
| 59 | Alphabet Button Search - Dynamically hiding/showing the search bar based on number of records in a Grid. | The Alphabet Buttons search bar allows you to quickly search for records in a Grid that start with a certain
letter. In the case of a Grid with just a few records, you might want to hide the search bar. This video
shows how you can use Javascript System events to dynamically show/hide the search bar.
|
| 60 | Showing row-level errors in a pop-up window | By default, when you submit a Grid and the server determines that there are errors in the data, the errors are
either shown next to the field(s) that have errors, or in the case of 'row-level' errors, the errors are
shown by turning on an error icon in the row selector, which the user can then hover over with the mouse
to see the actual error text.
This works well if the Grid has a tabular display. But in the case where the Grid is formatted as a Form, if the form has a large number of fields, the error icon can be too subtle and is easily overlooked. A new option allows you to display 'row-level' errors in a pop-up window.
|
| 61 | Multiple Language Support in the TabbedUI and PageLayout Components | Multiple Language support was originally introduced in the Grid component (see Video 32). Now, it has been extended
to the Tabbed UI and Page Layout components.
(Requires build 3525 or above) |
| 62 | Getting a pointer to a Grid's parent Grid Object | Note: This video is aimed at advanced users who are writing their own Javascript event handlers.
The Grid object exposes many methods that you can call from Javascript event handlers in your Grid components. Typically, your Javascript looks like this:
{grid.object}.methodName();
'{grid.object}' is a placeholder that gets replaced with the Grid object alias at run-time.
There are situations where a Grid is opened as a child of a parent Grid and you want to execute a method on the the Grid's parent Grid. In this case, you can't use the {Grid.object} placeholder. This video explains how you can get a pointer to a Grid's parent Grid.
(Requires build 3525 or above) (See also video 92) |
| 63 | Customize Language in Date Picker | The strings for month and day names in the Date Picker can now be customized. This feature also works with the
<a5:r> language translation tags, making it easy for your application to automatically use the appropriate
language strings for different users.
(Requires build 3530 or above) |
| 64 | TabbedUI Component - Refreshing Parent Grid when child Grid tab pane is closed. | When you use Action Javascript to open a child Grid in a pop-up Ajax window, you have always had the option in
the Action Javascript builder of specifying that the parent Grid should be refreshed when the pop-window
is closed. Now, if the parent Grid is running in the Tabbed UI and your button opens the child Grid in a
new tab pane in the Tabbed UI component, you can specify that when the tab pane for the child Grid is closed
that the parent Grid should be refreshed.
(Required build 3535 or above) |
| 65 | Linked Content Enhancements - Placing Linked Content into the Master Template | Linked Content Sections allow you to display a child Grid that is linked to a record in a parent Grid (for example,
showing invoice line-items for a given invoice record). Previously, you could only place the Linked Content
sections in one of the Grid's Free-form Edit regions. Now, you also have the option of placing the Linked
Content in the Grid's Master Template. This video explains the benefits of using this new option.
(Requires build 3535 or above) |
| 66 | User-defined Ajax Callbacks - Understanding what Information is Available to you when you write your Xbasic Callback Handler | Action Javascript allows you to define a user-defined Ajax callback. Typically, you define an Xbasic function
to handle the callback. This video explains how you can use the Xbasic Debugger to explore what information
is available to you when you write the Xbasic Callback Handler. It also explains how you can use Javascript
to 'harvest' any data on the page and pass that information back to the server as part of your Ajax callback.
|
| 67 | Tutorial on Path Aliases | In web applications, filename references are typically aliased (e.g [PathAlias.ADB_Path]\Customer.dbf). The aliases
are resolved using data that is published in the a5_application.a5i file in the webroot. These videos present
a short tutorial on understanding aliases.
|
| 68 | Reports - Using session variables in Reports | Session variables are used throughout web applications. You can reference session variables in reports. This
video show how you can place a calculated field on a report to print out the value in a session variable.
(Requires build 2830-3540 or above)
|
| 69 | How to Pass Variables from a Parent Grid to a Child Grid | This video presents a short tutorial on how you can pass arbitrary data from one Grid to another Grid.
|
| 70 | Controlling the Position of Pop-up Ajax Windows | When you use Action Javascript to open a Grid, web page, or Report, you are using a pop-up Ajax window to display
the target object. Previously you did not have control over where the pop-up window was displayed. It was
always centered when initially displayed, and then its position was remembered for subsequent displays.
Now, there are several new options for controlling the position of these pop-up windows.
(Required build 2842-3541 or above) |
| 71 | Customizing the Write Conflict Error Message | The Grid component uses 'Optimistic record locking' to prevent one user from overwriting another user's edits
when two users edit the same record at the same time. The OnWriteConflict event handler allows you to customize
the Write Conflict error message.
(Requires build 2862-3542 or above) |
| 72 | Duplicating an Existing Record | Sometimes when you are entering a new record into a database, it would be great to be able to use the data from
an existing record as a starting point for the new record. This video shows how you can create a button in
your Grid that fills in the data in the new record row with data from the current record.
|
| 73 | Client-side Xbasic | Typically the HTML events in a Grid (e.g. onClick, onChange, onBlur, etc.) are handled using Javascript. But
in the case where the Grid is running on the Desktop in a Desktop application (which includes 'Working Preview'
mode), you can actually use Xbasic functions to handle these HTML events.
This is an extremely powerful feature for users who incorporate the Grid component into their Desktop applications. (Requires build 2877 - 3543 or above) |
| 74 | Printing Reports from a Grid in Working Preview mode |
Previously, if you added a button to a Grid component to print a Report, the report would only render if
the Grid
(Requires build 2877 - 3543 or above)
|
| 75 | Using an Auto-suggest instead of a Dropdown Control - 'Coded Lookups' | A very popular feature of a Dropdown control is that it allows you to store an 'id' value, but display a text
value. For example, in an Order Items table, you might store the 'product id' value, but display the corresponding
'product name' field. When the user is editing data they can select from a list of product names, which is
obviously much easier than having to enter a product id.
A significant drawback, however, of using dropdown controls is that the list of choices for the control has to be loaded when the Grid is loaded. If the list is small, then this does not represent a problem. However, what if the list is extremely large? This would cause a significant slowdown in loading the Grid. If the Grid displayed multiple rows, then the problem is even worse because the list will be downloaded for each row in the Grid!
These videos show a technique where the auto-suggest control is used rather than the dropdown control. The
user still enters a product name and the corresponding product id gets stored in the table.
Because the list of choices does not have to be loaded up front, the Grid will load much more quickly, and then when a list of choices is presented to the user, it is pre-filtered based on the characters the user has already typed into the field.
|
| 76 | Currency Symbols from any Country in the World | This video shows how you can easily format currency data in a web application to use the currency symbol from
any country in the world.
The video demonstrates both server side and client side formatting of the data. The second video demonstrates how you can print reports with international currency symbols.
|
| 77 | Customize SQL Error Messages | In a Grid component against a SQL database, when you do an Insert, Update, or Delete, the SQL Database might
send back an error. Typically the error message is not very friendly. The new onSQLExecuteError event allows
you to intercept the error and show a friendlier error to the user.
(Requires Version 10.5) |
| 78 | Customizing SQL Insert, Update and Delete Statements - Using Stored Procedures to Update your Database | In a Grid component that is based on a SQL database, the Insert, Update and Delete SQL statements that are executed
when a user inserts, updates or deletes a record are automatically computed by Alpha Five.
In some cases, a user might want more control over how these SQL statements are executed, or might want to use stored procedures to insert, update or delete records. The onBeforerSQLCommandExecute and onAfterSQLCommandExecute server side events allow you fully customize the SQL statements that the Grid executes in order to insert, update or delete records.
In addition, another common use for these events is to update some other table at the same time as the update
is being performed in the tables the Grid is based on. For example, you might want to add a record to
a log table.
When you perform updates against some other table as part of our update, insert or delete, you might want to wrap the entire operation into a single transaction. This is easily done by starting a transaction in the onBeforeSQLCommandExecute event and then either committing or rolling back the transaction in the onAfterSQLCommandExecute event.
These videos discuss these new events.
(Requires Version 10.5) |
| 79 | Setting Default Values in the Search Part and Automatically Searching the Grid | In the case where you have a Grid with a Search Part, you might want the Grid to open with the Search Part already
filled in with default search values. And furthermore you might want to actually submit the Search Part so
that the user's initial view of the Grid is a filtered view based on the Search Part's default values.
|
| 80 | Customizing the Layout of the Detail View Toolbar - Adding and Removing Buttons | You have always been able to customize the icons and bubble help that are displayed in the Detail View toolbar.
Now you can completely customize the layout of the toolbar. You can eliminate any of the standard buttons
if you want, or add your own buttons to the toolbar.
|
| 81 | Using GUIDs (Unique Identifiers) as a Table's Primary Key. | A GUID (Globally Unique Identifier) is an ideal choices for the Primary Key of a record. This video shows how
you can easily build a Grid component on a table that has a GUID as its primary key. The video demonstrates
how you can assign the GUID value to the primary key field in the new records that you create in the Grid
component. The video show how a SQL table is used, but the technique applies equally well to native Alpha
Five .dbf tables.
|
| 82 | Power Searches in the Search Part of the Grid Component | The Search Part of the Grid component supports a special syntax that allows you to do powerful searches for ranges
of records, to search for multiple different values in a field, and to use the special .. operator.
This video demonstrates how you can use the Search Part to perform powerful searches.
|
| 83 | Search Part - Multi-Value Fields - Checkboxes and Multi-line Dropdownboxes | The checkbox control and the dropdown box control (when configured appropriately) allow multiple values to be
selected. When you use a multi-value control in the Search Part of a Grid component, you can now specify
if multiple selected values should be combined with an AND or and OR clause.
The video demonstrates the significance of this new option. |
| 84 | Using Custom Javascript Functions in Client-Side Expressions. | This video shows how you can use custom Javascript functions in client-side calculations. Client side calculations
include calculated fields, show/hide expressions, enable expressions, conditional image and conditional style
calculations. When you write these expressions you can use any custom Javascript functions that you create.
This is an extremely powerful feature because it allows you to create very complex client-side calculations,
using the full power of the Javascript programming language.
In the video, a custom Javascript function is defined to compute the number of minutes between to date/time values.
|
| 85 | Custom Ajax Callback - an In-depth Example |
This series of videos shows an in-depth example of a custom Ajax Callback. The video shows how a record in the Grid can be deleted. Before the record is deleted a callback is made to the server to see if the user is allowed to delete the record. If so, then custom SQL commands are executed (using AlphaDAO). The videos then show how the action can be enhanced by prompting the user for confirmation after it has been determined that the user is allowed to delete the record.
In a desktop application prompting the user for confirmation is simple because there is no concept of server-side and client-side code execution that you need to be aware of. But in a Web application, the act of prompting the user for confirmation when a server-side event is executing is more complex because the prompt has to be executed client-side. The video shows how the callback is divided into two separate callbacks, and how the confirmation prompt is executed on the client-side.
If you want to run this component for yourself, you can download the Grid component. You will need to change the connection string to point to the sample Alphasports.mdb file in the Alpha Five V10 program folder in the MDBFiles sub-folder.
|
| 86 | Moving a Button from the Grid Row to the Navigation Bar or Free-form Edit Region | When you place a button in a Grid row, the button repeats for every row in the Grid. You might prefer to put
the button in the Grid's Navigation Bar, or in a free-form edit region. This video shows a simple technique
for putting button in the Navigation Bar or free-form edit regions.
(Note: The techniques shown in this video are no longer necessary if you have the Action Buttons Feature pack, which automates the process of placing buttons in the Grid toolbar.) |
| 87 | Using the 'Checked column' in a User-defined Ajax Callback | When you design a Grid you can specify that the Grid should show a 'checkbox' column to allow the user to select
multiple rows in the Grid. When you define a custom Ajax callback, the callback includes information about
the primary key of each row that was checked.
This video shows how you can create a custom Ajax callback to apply a filter to the Grid to show only the records that the user checked.
(Note: Many of the techniques shown in this video are now available through built-in Grid features - see video 88. However, the techniques shown here are still interesting as they demonstrate useful concepts.) |
| 88 | Using the 'Checked column' in a Grid Component | These videos show several different ways in which the 'Checked column' in the Grid can be used.
(Requires build 3341-3597 or above)
|
| 89 | Exporting Checked Records to Excel | This video shows how you can allow the user to select an arbitrary number of records by checking the checkbox
selector for a record, and then exporting those records to Excel.
Note: To duplicate the functionality shown here you need the Export to Excel and Action Buttons Feature Packs.
|
| 90 | Using Javascript to total values in a Column for the Checked Rows |
This video shows how you can create a running total of the values in a column of the Grid. When a row is checked, the vaule in the column is added to the running total. When the row is unchecked, the value in the column is deducted from the running total. |
| 91 | Using a User-defined Ajax Callback to add records to a 'Transaction Table' | This video shows how you can create a user defined Ajax callback to add records to a transaction database. The
video assumes that the transaction database is a SQL database, but the principles are the same for .dbf tables.
The new record in the transaction table is populated with data from the current row in the Grid.
|
| 92 | Refreshing the 'parent' Grid when an event occurs in a 'child' Grid | This video shows how you can trigger a refresh of a row in a 'parent' grid when some event happens in a 'child'
grid. The video show a Grid based on the 'Customer' table that has a Linked Content Section showing a Grid
based on the 'Invoice_Header' table. (The 'Customer' Grid is therefore the 'parent' of the 'Invoice_Header'
Grid.)
When a record in the 'Invoice_Header' Grid is saved, the AfterUpdateRecord event handler makes a change to the parent record in the 'Customer' table and then forces the 'Customer' Grid to refresh in order to show the change.
(See also video 62) Note: If you have build 3906-3632 or above, the technique described in the video to avoid using the {Grid.object} placeholder is no longer necessary. |
| 93 | Tab UI - Warning before Closing a Tab Pane - Custom Coding | When you open a Grid component in a Tabbed UI pane, if you then try to close the tab pane when the Grid is dirty,
you get a warning that the Grid is dirty and you have to either save the Grid or abandon the changes. This
behavior is 'built-in' to the Tabbed UI.
However, if you open an .A5W page in a Tabbed UI pane (that contains a Grid, or multiple Grids, for that matter), there is no built-in checking before a Tabbed UI pane is closed. These videos show how you can you own custom coding to trap if the Tab pane is 'dirty' and prevent it from closing.
The code works by setting an arbitrarily named property of the Tabbed UI object called 'gridIsDirty' |
| 94 | Using Grids in Desktop Applications - Passing Data from the Grid to Xbasic | A power feature for developers who are building Desktop application is the ability to use Grid components in
their Desktop applications. This video, which was made in response to a specific question from a developer,
shows how to set a global Xbasic variables from a field in the Grid component.
|
| 95 | Opening Tab Panes automatically when a Tabbed UI Component is Opened | When a TabbedUI component is opened, the Home tab is displayed. In this video we show how you can automatically
open any number of Tabbed UI panes when the Tabbed UI Component is first opened.
|
| 96 | Showing a value in the Grid only for the current row and hiding the value when the row does not have focus. | Assume that you have a Grid with multiple columns. Let's say you only want to display the value in one of the
columns for the row that has focus. In other words, the value in this column will be hidden for all rows,
except for the row that has focus. These videos show two different ways in which you can write the Javascript
to accomplish this:
|
| 97 | Action Buttons - Programmatically Clicking a Button using Javascript | This video shows how you can use Javascript to 'click' an Action Button.
|
| 98 | Positioning a Grid's Linked Content Sections Precisely | Say you have a Grid which displays a child Grid in a Linked Content Section. Assume that the child Grid also
has a child Grid in a Linked Content Section. So, when the top level Grid is displayed, there are actually
three Grids visible - parent, child and grand child.
|
| 99 | Enabling or Hiding an Action Button if No Records in Current Query | This video shows how you can enable or hide an Action Button if there are no records in the current Grid query.
|
Feature Packs
Feature Packs are separately sold add-ons that enhance the functionality of Alpha Five.
To see a list of the available feature packs, click here.
Understanding the Server-side Events in the Grid Component
This series of videos gives a short tutorial on the various server-side events in the Grid.
Click here to download the components used in these Videos. You can install these components into a web project in the
sample Alphasports database. You will need to make a named connection called 'asports' that point to Alphasports.mdb.
A copy of Alphasports.mdb can be found in the MDBFiles folder in your A5V10 Program folder. You will need to copy this file to a
location outside the Program Files folder if your machine has UAC turned on.
| SSE1 | Validating Data | These videos explain the various was in which data can be validated before it is written to a database.
|
| SSE2 | After Validate Events | These videos explain the various events that fire after data is successfully saved in the database.
|
| SSE3 | Redirect Event | These videos explain how the redirect event can be used to dynamically compute a redirect target after data is
committed.
|
| SSE4 | Render Events | These videos explain how the various 'onRender' events can be used to inject custom HTML into the Grid as it
is rendered.
|
| SSE5 | 'OnSearchPartFilterCompute' Event | These events show how you can use the 'OnSearchPartFilterCompute' event to customize the way the search filter
is computed from the data that is submitted when the user submits the Search Part.
|
| SSE6 | BeforeSearch events. | These videos show how you can use the BeforeSearch events.
|
| SSE7 | OnSummarySectionRender Event | These videos show how you can use the 'OnSummarySectionRender' event to completely customized the summary section
of the Grid and inject your own calculated fields into this section.
|
| SSE8 | RowExpander Events | These videos show how you can create a custom row expander to display any content you want when a row is expanded.
We also demonstrate how you can control which rows display the 'expand row' icon.
|
| SSE9 | OnGridInitialize and OnGridExecute Events | This video explains how you can use the OnGridInitialize and onGridExecute events.
|
| SSE10 | Customize SQL Error Messages | In a Grid component against a SQL database, when you do an Insert, Update, or Delete, the SQL Database might
send back an error. Typically the error message is not very friendly. The new onSQLExecuteError event allows
you to intercept the error and show a friendlier error to the user.
(Required V10.5) |
| SSE11 | Customizing the Write Conflict Error Message | The Grid component uses 'Optimistic record locking' to prevent one user from overwriting another user's edits
when two users edit the same record at the same time. The OnWriteConflict event handler allows you to customize
the Write Conflict error message.
(Requires build 2862-3542 or above) |
| SSE12 | Customizing SQL Insert, Update and Delete Statements - Using Stored Procedures to Update your Database | In a Grid component that is based on a SQL database, the Insert, Update and Delete SQL statements that are executed
when a user inserts, updates or deletes a record are automatically computed by Alpha Five.
In some cases, a user might want more control over how these SQL statements are executed, or might want to use stored procedures to insert, update or delete records. The onBeforerSQLCommandExecute and onAfterSQLCommandExecute server side events allow you fully customize the SQL statements that the Grid executes in order to insert, update or delete records.
In addition, another common use for these events is to update some other table at the same time as the update
is being performed in the tables the Grid is based on. For example, you might want to add a record to
a log table.
When you perform updates against some other table as part of our update, insert or delete, you might want to wrap the entire operation into a single transaction. This is easily done by starting a transaction in the onBeforeSQLCommandExecute event and then either committing or rolling back the transaction in the onAfterSQLCommandExecute event.
These videos discuss these new events.
(Required Version 10.5) |